<template>
  <div class="app-detail">
    <list-layout>
      <div slot="search">
        <el-form :model="queryParams" :inline="true" ref="queryForm" v-show="showSearch" label-width="128px">
          <el-form-item :label="$t('task.filename')" prop="fileName">
            <el-input v-model="queryParams.fileName" :placeholder="
              $t('public.placeholder', {
                placeholder: $t('task.filename'),
              })
            " clearable size="small" @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item :label="$t('生成开始时间')">
            <el-date-picker v-model="queryParams.beginTime" value-format="yyyy-MM-dd" type="date"
                            :placeholder="$t('public.select_holder',{select_holder: $t('生成开始时间')})">
            </el-date-picker>
          </el-form-item>
          <el-form-item :label="$t('生成结束时间')">
            <el-date-picker v-model="queryParams.endTime" value-format="yyyy-MM-dd" type="date"
                            :placeholder="$t('public.select_holder',{select_holder: $t('生成结束时间')})">
            </el-date-picker>
          </el-form-item>
        </el-form>
        <div style="display: flex; justify-content: center;margin-top: 10px;">
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{
              $t("public.search")
            }}
          </el-button>
          <el-button icon="el-icon-refresh" class="resectBtn" size="mini" @click="resetQuery">{{
              $t("public.reset")
            }}
          </el-button>
        </div>
      </div>

      <div class="app-container">
        <div class="container-table">
          <el-table class="table-fixed" ref="multipleTable" :key="incomingKey" v-loading="loading" :height="tableHeight"
                    border
                    :data="incomingList">
            <el-table-column :label="$t('文件名称')" sortable align="left" prop="fileName"
                             min-width="120" :show-overflow-tooltip="true"/>
            <el-table-column :label="$t('生成时间')" sortable align="left" prop="createTime" min-width="120"
                             :show-overflow-tooltip="true"/>
            <el-table-column :label="$t('状态')" sortable align="left" prop="fileStatus" min-width="120"
                             :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div class="action-wrap">
                  <span v-if="parseInt(scope.row.fileStatus) === 1" class="labelB">任务待办中</span>
                  <span v-if="parseInt(scope.row.fileStatus) === 2" class="labelY">生成完成</span>
                  <span v-if="parseInt(scope.row.fileStatus) === 3" class="labelN">生成失败</span>
                  <span v-if="parseInt(scope.row.fileStatus) === 4" class="labelN">生成中</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column :label="$t('生成人')" sortable align="left" prop="createBy" min-width="120"
                             :show-overflow-tooltip="true"/>
            <el-table-column :label="$t('生成结果')" sortable align="left" prop="errorMsg" min-width="120"
                             :show-overflow-tooltip="true"/>
            <el-table-column :label="$t('public.opera')" fixed="right" align="center" width="160">
              <template slot-scope="scope">
                <div class="action-wrap">
                  <el-button type="primary" plain icon="el-icon-download"  @click.native="handleDownload(scope)" />
                  <el-button type="danger" plain icon="el-icon-delete"  @click.native="handleViewDelete(scope)" />
                </div>
              </template>
            </el-table-column>
          </el-table>

          <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                      :limit.sync="queryParams.pageSize" @pagination="getList"
                      layout="total, sizes, prev, pager, next, jumper"/>
        </div>

      </div>
    </list-layout>
  </div>
</template>

<script>

import {mapGetters} from 'vuex'

import SelectUserDialog from '@/views/components/SelectUserDialog'

import { filedownloadgenerationrecordList, filedownloadgenerationrecordDelete } from "@/api/basic/materialClassification"

export default {
  name: 'editMaterial',
  dicts: [
    'NYIQC_CYCLE_TYPE',
    'NYIQC_RULE_TACTICS'
  ],
  components: {

    SelectUserDialog,
  },
  data() {

    return {
      tableHeight: 'calc(100vh - 308px)',

      typeOpen: false,
      queryParams: {
        pageNum: 1,
        pageSize: 20
      },
      twiceTrial: "1",
      onceTrialDocFile: [],
      twiceTrialDocFile: [],
      // 遮罩层
      loading: true,
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      stemList: [],
      // 总条数
      total: 0,
      // 字典表格数据
      incomingList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 日期范围
      dateRange: [],
      selectRows: [],
      rowifInspect: '',
      // 查询参数

      // 表单参数
      form: {},
      // 表单校验
      fullscreen: false,
      incomingKey: 0,
      projectList: [],
      ruleData: {},   // 规则详情
      fileList: [],
      disabled: false,
      typeOpen2: false,
      typeOpen3: false,
      twotype: "",
      typeModel: {}
    }
  },

  mounted() {
    // this.getRuleInfo()
    this.getList()

  },
  activated() {
    // this.getRuleInfo()
    this.getList()
  },
  filters: {
    timefilter(time) {
      if (!time) {
        return ""
      }
      var date = new Date(time);
      var Y = date.getFullYear() + '-';
      var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
      var D = date.getDate() + ' ';
      var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
      var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
      var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();

      return Y + M + D + h + m + s
    }
  },
  computed: {
    ...mapGetters(['userId', 'name', 'deptName']),

  },

  methods: {

    handleDownload(row) {
      if (row.row.filePath != null) {
        // this.download(
        //     row.row.filePath,
        //     {},
        //     `type_${new Date().getTime()}.xlsx`
        // )
        // 创建一个链接元素
        const link = document.createElement('a');
        link.href = row.row.filePath;
        link.target = '_blank'; // 在新标签页中打开
        // link.download = `type_${new Date().getTime()}.xlsx`; // 设置下载文件的名称
        // 模拟点击链接以触发下载
        link.click();
      }else {
        this.$modal.msgError('文件地址异常，请联系管理员')
      }
    },
    /** 删除按钮操作 */
    handleViewDelete(row) {
      this.$confirm("注意！此操作将删除生成的履历表记录及物理文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        filedownloadgenerationrecordDelete(row.row.id).then((response) => {
          this.$modal.msgSuccess(this.$t('deptManage.delSuc'))
          this.getList();
        })
      })

    },
    fileChange(e) {
      this.fileList = e
      console.log(e)
    },

    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /**  类型列表 */
    getList() {
      this.loading = false
      var data = {
        ...this.queryParams,
        params: {
          beginTime: this.queryParams.beginTime,
          endTime: this.queryParams.endTime
        }
      }
      delete data.beginTime
      delete data.endTime
      filedownloadgenerationrecordList(data).then((response) => {
        if (response.code == 200){
          this.incomingList = response.rows
          this.total = response.total
          this.loading = false
        }
      })
    },
    // 取消按钮
    resetQuery() {

      this.queryParams = {
        pageNum: 1,
        pageSize: 20
      }
      this.getList()
    },

    /** 关闭操作 */
    handleClose(row) {
      this.$router.go(-1)
    },

  },
}
</script>
<style lang="scss" scoped></style>
